<template>
  <div ref="box">This is a root element</div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup () {
    // 创建响应式的变量
    const root = ref(null)

    // 生命周期钩子 dom渲染出来之后
    onMounted(() => {
      // DOM 元素将在初始渲染后分配给 ref
      console.log(root.value) // <div>This is a root element</div>
    })

    // 返回出去
    return {
      // Vue在解析模板时,会把ref标记的元素赋值给返回的同名变量
      box: root
    }
  }
}
</script>
